<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无缝轮播图</title>
   
    <script
    src="https://code.jquery.com/jquery-1.12.4.js"
    integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
    crossorigin="anonymous"></script>
    <script src="case04.js"></script>
</head>
<body>
    <div class="banner">
        <ul class="hot" ><!--图片集-->
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="2.jpg"></a></li>
            <li><a href="#"><img src="3.jpg"></a></li>
            <li><a href="#"><img src="4.jpg"></a></li>
            <li><a href="#"><img src="5.jpg"></a></li>
        </ul>
        <!--底部小圆点-->
        <ul class="dot"><li class="on"></li><li></li><li></li><li></li><li></li><li></li></ul>
        <!--左右移动箭头，默认情况下隐藏，鼠标移入显示，鼠标移出隐藏-->
        <div class="arrow">
            <span class="prev">&lt;</span><span class="next">&gt;</span>
        </div>
    </div>
</body>
</html>